<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>multifarce - the text adventure with an infinite number of endings!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=660, user-scalable=yes" />
<link href="/media/style.min.css?{{ version }}" rel="stylesheet" type="text/css" />
<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="/js/multifarce.min.js?{{ version }}" type="text/javascript"></script>
</head>
<body class="dom-loading scheme-3">
<div id="header">
  <h1><a href="#">multifarce</a></h1>
  <div id="user">
    <a id="avatar" href="http://en.gravatar.com/" title="Change your avatar at Gravatar">
      <img alt="Change your avatar at Gravatar" src="http://www.gravatar.com/avatar/?s=28&amp;d=identicon&amp;r=PG" width="28" height="28" />
    </a>
    <span id="username">...</span>
    <ul id="actions">
      <li id="action-1"><a href="#register">Register</a></li>
      <li id="action-2"><a href="#log-in">Log in</a></li>
    </ul>
  </div>
</div>
<div id="body">
  <h2 id="page-name">Hello World!</h2>
  <div id="notifications"></div>

  <div class="page" id="home-page">
    <div id="current-frame">
      <h3>Hello World!</h3>
      <!--p class="image"></p-->
      <div class="text">
        <p>Welcome to <strong>multifarce</strong>, the text adventure with an
        infinite number of endings (well, that's the idea anyways)! You can
        start playing it immediately below, or you can register to be able to
        continue the story!</p>
        <p>It works like this. The game always starts on the
        <em>The Beginning</em> <strong>frame</strong>. Now you're able to enter
        any <strong>command</strong> you can think of. If the command does not
        exist, you have the ability to create it (and select/create the frame it
        will lead to) and continue the story!</p>
        <p>To begin your adventure, type <strong>start</strong>. You can restart
        the game at any time by typing <strong>reset</strong>.</p>
      </div>
    </div>
    <div id="input">
      <h3>What to do?</h3>
      <p>
        <input class="text" id="action" type="text" />
        <button id="action-go">Do it!</button>
      </p>
    </div>
    <div id="log"></div>
  </div>

  <div class="page" id="create-page">
    <h3>New command suggestions</h3>
    <p>Imagination dry? Maybe this list of commands can inspire you! It's a list
    of commands that have been entered by players, but that do not exist yet.
    </p>
    <ul class="object-list" id="create-command-suggestions">
      <li>Um yeah... This is going to work soon! Promise!</li>
    </ul>

    <h3>Your frames</h3>
    <p>Frames created by you. You may also want to <a href="#frames/new">create
    a new frame</a>!</p>
    <ul class="object-list" id="create-frames">
      <li>Please stand by...</li>
    </ul>

    <h3>Your commands</h3>
    <p>Commands created by you. You may also want to
    <a href="#commands/new">create a new command</a>!</p>
    <ul class="object-list" id="create-commands">
      <li>Please stand by...</li>
    </ul>
  </div>

  <div class="page" id="log-in-page">
    <div class="multifarce">
      <div class="info">
        <h3>Heeey, wait a minute!</h3>
        <p>You're already logged in to multifarce! You'll need to
        <a href="#log-out">log out</a> first before you can log in again!</p>
      </div>
    </div>
    <div class="not-google not-multifarce">
      <div class="info">
        <h3>Psssst! Do you Google?</h3>
        <p>Have you linked a Google Account to multifarce?<br />&mdash;
        <a class="google-accounts" href="#">Yup! Take me to the Google log in
        page!</a></p>
        <p>If you want to register, you should head on over to
        <a href="#register">the registration page</a>!</p>
      </div>
    </div>
    <div class="google not-multifarce">
      <div class="info">
        <h3>Ahoy there, Googler!</h3>
        <p>So you're logged in with your Google account, but you haven't linked
        it to multifarce yet! Well, we'll sort that out in no time! Head on over
        to <a href="#register">the registration page</a>!</p>
      </div>
    </div>
    <h3>Ye olde login</h3>
    <p class="field">
      <label for="log-in-username">Username</label>
      <input class="text" id="log-in-username" type="text" />
    </p>
    <p class="field">
      <label for="log-in-password">Password</label>
      <input class="password" id="log-in-password" type="password" />
    </p>
    <p class="field"><button id="log-in-go">Log me in, Scotty!</button></p>
  </div>

  <div class="page" id="log-out-page">
    <div class="multifarce">
      <div class="info">
        <h3>Logging out!</h3>
        <p>You are being logged out!</p>
      </div>
    </div>
    <div class="not-multifarce">
      <div class="info">
        <h3>Logged out!</h3>
        <p>You are logged out!</p>
        <p><a href="#">Okay, go back to the home page!</a></p>
      </div>
    </div>
  </div>

  <div class="page" id="new-command-page"> 
    <h3>Creating a new command</h3>
    <p class="field">
      <label for="new-command-frame">On frame</label>
      <select id="new-command-frame">
        <option>Loading!</option>
      </select>
    </p>
    <p class="field">
      <label for="new-command-1">Command #1</label>
      <input class="text" id="new-command-1" type="text" />
    </p>
    <p class="field">
      <label for="new-command-2">Command #2</label>
      <input class="text" id="new-command-2" type="text" />
    </p>
    <p class="field">
      <label for="new-command-3">Command #3</label>
      <input class="text" id="new-command-3" type="text" />
    </p>
    <p class="field">
      <label for="new-command-4">Command #4</label>
      <input class="text" id="new-command-4" type="text" />
    </p>
    <p class="field">
      <label for="new-command-5">Command #5</label>
      <input class="text" id="new-command-5" type="text" />
    </p>
    <p class="field">
      <span><a href="#clean" id="new-command-clean">Clean commands</a> &ndash;
      The commands are internally modified so that they match as well as
      possible. For example, special characters are removed, and certain
      common words such as "the", "a" and "an". Certain words are replaced
      with synonyms ("walk" &rarr; "go".) Clean the commands to see these
      changes.</span>
    </p>
    <p class="field">
      <span><strong>Note:</strong> You only need to enter one command; the
      other command text boxes can be left blank.</span>
    </p>
    <p class="field">
      <label for="new-command-text">Text</label>
      <input class="text" id="new-command-text" type="text" />
    </p>
    <p class="field">
      <span>This is a short text that will be shown to the user when your
      command has been successfully executed.</span>
    </p>
    <p class="field">
      <label for="new-command-go-to-frame">Go to frame</label>
      <select id="new-command-go-to-frame">
        <option>Loading!</option>
      </select>
    </p>
    <p class="field"><span><a href="#frames/new">Create a new frame!</a> &ndash;
    <strong>Warning!</strong> Going to the <em>Create frame</em> page will
    discard your changes on this page! In the future, you'll be able to create
    a new frame in combination with a new command.</span>
    </p>
    <p class="field"><button id="new-command-go">Create it!</button></p>
  </div> 

  <div class="page" id="new-frame-page"> 
    <h3>Creating a new frame</h3>
    <p class="field">
      <label for="new-frame-title">Title</label>
      <input class="text" id="new-frame-title" type="text" />
    </p>
    <p class="field">
      <label for="new-frame-text">Text</label>
      <span>You can use <code>*text*</code> for <strong>text you want to stand
      out</strong> and <code>_text_</code> for <em>text you want to
      emphasize</em>.</span>
      <textarea id="new-frame-text" cols="50" rows="10"></textarea>
    </p>
    <p class="field"><button id="new-frame-go">Create it!</button></p>
  </div> 

  <div class="page" id="not-found-page"> 
    <h3>Oh noes!</h3>
    <p>The path <strong id="not-found-path">.</strong> don't lead nowhere! Try
    hitting <em>Back</em> in your browser or going back to
    <a href="#">the start</a>.</p> 
  </div> 

  <div class="page" id="register-page">
    <div class="multifarce">
      <div class="info">
        <h3>Heeey, wait a minute!</h3>
        <p>You're already logged in to multifarce! You'll need to
        <a href="#log-out">log out</a> to be able to register!</p>
      </div>
    </div>
    <div class="google not-multifarce">
      <div class="info">
        <h3>Stay awhile and listen!</h3>
        <p>You're ready to link your Google account with multifarce! Just fill
        in the fields below and hit <em>Sign me up!</em></p>
        <p>Since passwords are handled by Google, you will not be able to enter
        a password for multifarce if you link your account.</p>
        <p class="head">So, do you want to link your Google account with
        multifarce?</p>
        <p>
            <label>
                <input id="register-use-google-yes" name="register-use-google" type="radio" value="yes" />
                Yup!
            </label>
            <label>
                <input checked="checked" id="register-use-google-no" name="register-use-google" type="radio" value="no" />
                Nah.
            </label>
        </p>
      </div>
    </div>
    <div class="not-google not-multifarce">
      <div class="info">
        <h3>Woah, hold on a second!</h3>
        <p>Do you have a Google Account? If you do, you can log in with your
        Google Account and then link it to multifarce. Don't worry, it's
        perfectly safe, Google only tells multifarce if you logged in OK and
        what your Google e-mail is. By linking your account to multifarce your
        password will be kept safe with Google.</p>
        <p><a class="google-accounts" href="#">Yup! Take me to the
        Google log in page!</a></p>
      </div>
    </div>
    <h3>Your desired account information</h3>
    <p class="field">
      <label for="register-username">Username</label>
      <input class="text" id="register-username" maxlength="20" type="text" />
    </p>
    <p class="field">
      <label for="register-name">Display name</label>
      <input class="text" id="register-name" maxlength="20" type="text" />
    </p>
    <p class="field">
      <label for="register-email">E-mail address</label>
      <input class="text" id="register-email" type="text" />
    </p>
    <p class="field">
      <span><strong>Note:</strong> Your e-mail is currently only used for
      <a href="http://en.gravatar.com/">Gravatar support</a>. It will never be
      shared with other parties, nor will it be sent unsolicited e-mails.
      </span>
    </p>
    <p class="field">
      <label for="register-password">Password</label>
      <input class="password" id="register-password" type="password" />
    </p>
    <p class="field">
      <label for="register-password-2">Repeat password</label>
      <input class="password" id="register-password-2" type="password" />
    </p>
    <p class="field"><button id="register-go">Sign me up!</button></p>
  </div>
</div>
<div id="footer">
  <p>Open source: <a href="http://code.google.com/p/multifarce/">Google Code
  project page</a> &mdash; Copyright &copy; <a href="http://blixt.org/">Andreas
  Blixt</a> {% now "Y" %}</p>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-2030892-8");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
